<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="first"></el-tab-pane>
      <el-tab-pane label="发布订单" name="second"></el-tab-pane>
    </el-tabs>
    <ul class="subscribe">
      <li v-for="(item, index) in data" :key="index">
        <div class="top">
          <el-link type="success">伍仁行家政</el-link>
          <el-button
            :disabled="item.state == 4"
            size="medium"
            type="primary"
            @click="deal(item.work_id, 2)"
            >取消预约<i class="el-icon-warning el-icon--right"></i
          ></el-button>
        </div>
        <div class="center">
          <el-image
            style="width: 100%; height: 100%"
            :src="'http://housekeepi.com/' + Object(item.work_user[0]).icon"
            :preview-src-list="srcList"
          >
          </el-image>
          <div class="price">
            <div><el-button type="primary" icon="el-icon-user" circle> </el-button
            ><el-link type="primary">{{
              Object(item.work_user[0]).nick_name
            }}</el-link></div>

            <div><el-button type="success" icon="el-icon-umbrella" circle> </el-button
            ><el-link type="success">
              {{item.province}} {{item.city}} {{item.area}}
            </el-link></div>
            <div><el-button type="warning" icon="el-icon-phone-outline" circle> </el-button
            ><el-link type="warning">{{
              Object(item.work_user[0]).phone
            }}</el-link></div>
          </div>
        </div>
        <div class="footer">
          <el-button
            type="success"
            @click="open(item.work_id, 8, item)"
            :disabled="item.state != 4"
            >是否已完成</el-button
          >
          <el-link type="success"
            >应付金额:{{
              Math.ceil(
                ((item.end_time - item.start_time) / 1000 / 1000) * 24
              ) * item.money
            }}元</el-link
          >
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      activeName: "first",
      status: -2,
      subscribeData: [],
      price: "100$",
      fit:'',
      srcList: [
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1799342516,3753463079&fm=26&gp=0.jpg",
      ],
      url:
        "",
      data: [],
      token: "",
    };
  },
  methods: {
    ...mapMutations(["PUSH"]),
    handleClick(tab, event) {
      console.log(tab, event, this.activeName);
      if (this.activeName == "second") {
        this.fit=1
        this.myaxios({
          url: "http://housekeepi.com/api/workList",
          method: "post",
          data: {
            token: String(this.token),
            work_type: "1",
            work: 1,
          },
        })
          .then((e) => {
          let cachearr=[]
        cachearr = e.data.data;
      cachearr.map((item)=>{
        if(item.state!=2){
          this.data.push(item)
        }
      })
      console.log(this.data);
          })
          .catch(() => {
            console.log("error");
          });
      } else {
        this.fit=0
        this.myaxios({
          url: "http://housekeepi.com/api/workList",
          method: "post",
          data: {
            token: String(this.token),
            work_type: "1",
            work: 0,
          },
        })
          .then((e) => {
            let cachearr=[]
        cachearr = e.data.data;
      cachearr.map((item)=>{
        if(item.state!=2){
          this.data.push(item)
        }
      })
      console.log(this.data);
          })
          .catch(() => {
            console.log("error");
          });
      }
    },
    deal(val, statu) {
      this.myaxios({
        url: "http://housekeepi.com/api/workModify",
        method: "post",
        data: {
          token: String(this.token),
          work_id: String(val),
          state: String(statu),
        },
      })
        .then((e) => {
          // console.log(e.data.code);
          if(e.data.code==2000){
             this.myaxios({
          url: "http://housekeepi.com/api/workList",
          method: "post",
          data: {
            token: String(this.token),
            work_type: "1",
            work:this.fit,
          },
        })
          .then((e) => {
            let cachearr=[]
        cachearr = e.data.data;
      cachearr.map((item)=>{
        if(item.state!=2){
          this.data.push(item)
        }
      })
      console.log(this.data);
          })
          .catch(() => {
            console.log("error");
          });
          }else{
            confirm("不可重复操作")
          }
        })
        .catch(() => {
          console.log("error");
        });
    },
    open(val, statu, ite) {
      this.$confirm("此操作将确认工作人员是否已完成任务, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success ",
      })
        .then(async () => {
          this.$message({
            type: "success",
            message: "确认成功!",
          });
          this.deal(val, statu);
          this.PUSH(ite);
          // this.$store.state.workid=val
          this.$router.push({ path: "/comments" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消确认",
          });
        });
    },
  },
  mounted() {
    this.token = localStorage.getItem("token");
    this.myaxios({
      url: "http://housekeepi.com/api/workList",
      method: "post",
      data: {
        token: String(this.token),
        work_type: "1",
        work: 0,
      },
    })
      .then((e) => {
        let cachearr=[]
        cachearr = e.data.data;
      cachearr.map((item)=>{
        if(item.state!=2){
          this.data.push(item)
        }
      })
      console.log(this.data);
      })
      .catch(() => {
        console.log("error");
      });
  },
};
</script>

<style>
.el-link--inner {
  font-size: 24px;
}
.subscribe {
  list-style: none;
  padding: 20px;
}
.subscribe li {
  padding: 10px 15px;
  border-top: 5px solid #eee;
}
.subscribe li .top {
  display: flex;
  justify-content: space-between;
}
.subscribe li .center {
  padding: 15px 0;
  display: grid;
  grid-template-columns: 20% 70%;
  grid-gap: 20px;
  border-bottom: 1px solid #333;
}
.subscribe li .footer {
  padding: 10px 0;
  display: grid;
  /* justify-content: right; */
}
.price{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: start;
}
</style>